﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Areas/Admin/Views/_Layout.cshtml";
}
<link href="~/lib/layui/layui_ext/dtree/dtree.css" rel="stylesheet" />
<link href="~/lib/layui/layui_ext/dtree/font/dtreefont.css" rel="stylesheet" />
@*<script src="~/lib/layui/layui_ext/dtree/dtree.js"></script>*@
<div class="layui-container" style="width:100%">
    <div class="layui-row">
        <div class="layui-col-md3" style="height:900px;overflow: auto;margin-top:1em">
            <ul id="demoTree" class="dtree" data-id="0" style=""></ul>
        </div>
        <div class="layui-col-md9" style="margin-top:1em">
            <form class="layui-form layui-form-pane" id="formdata">
                <input type="text" name="id" value="" class="layui-input layui-hide">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">权限名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">权限码</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" id="Code" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">Icon</label>
                        <div class="layui-input-inline">
                            <input type="text" name="icon" id="Icon" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">Url</label>
                        <div class="layui-input-inline">
                            <input type="text" name="url" id="Url" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">父级</label>
                        <div class="layui-input-inline">
                            <input type="text"  id="ParentName" autocomplete="off" class="layui-input">
                            <input type="text" name="parentId" id="ParentId" autocomplete="off" class="layui-input layui-hide">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">排序码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sortCode" id="SortCode" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="权限菜单">
                        <input type="radio" name="type" value="2" title="公共菜单">
                        <input type="radio" name="type" value="3" title="权限项">
                        <input type="radio" name="type" value="4" title="节点组">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="description" name="Description" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" type="button" lay-submit="" lay-filter="addPermission">添加权限</button>
                    <button class="layui-btn" type="button" lay-submit="" lay-filter="updatePermission">更新权限</button>
                </div>
            </form>
        </div>

    </div>
</div>
<script>
    layui.extend({
        dtree: '/lib/layui/layui_ext/dtree/dtree'
    }).use(['element', 'layer', 'dtree', 'form'], function () {
        var element = layui.element,
            layer = layui.layer,
            dtree = layui.dtree,
            form = layui.form,
            $ = layui.$;
        var DTree1 = dtree.render({
            elem: "#demoTree",
            url: "/admin/permission/models",
            dot: false,
            toolbar: true,
            toolbarScroll: "#demoTree",
            toolbarLoad: "leaf",  // 表示工具栏加载的节点，  可选的值还有：noleaf（非最后一级）,leaf（最后一级节点）
            toolbarShow: ["delete"],  
            toolbarFun: {
                delTreeNode: function (treeNode) {
                    var nowNode = dtree.getNowParam("demoTree");
                    $.post("/admin/permission/delete", { id: nowNode.nodeId} , function (repo) {
                        showAndReload(layer, repo);
                    });
                }
            }
        });

        dtree.on("node('demoTree')", function (obj) {
            var data = obj.param;
            console.table(data)
            
            $("#formdata").initForm($.parseJSON(data.basicData));
            form.render(); 
            var parent = dtree.getParentParam(DTree1, data.nodeId + '');  
            $("#ParentName").val(parent.context);
        });

        $("#ParentName").click(function () {
            layer.open({
                type: 1,
                title: "选择树",
                area: ["400px", "80%"],
                content: '<ul id="selectParent" class="dtree" data-id="3"></ul>',
                btn: ['确认选择'],
                success: function (layero, index) {
                    var DTree2 = dtree.render({
                        elem: "#selectParent",
                        url: "/admin/permission/models",
                    });
                    // 绑定节点的双击
                    dtree.on("nodedblclick('selectParent')", function (obj) {
                        $("#ParentName").val(obj.param.context);
                        $("#ParentId").val(obj.param.nodeId);
                        layer.close(index);
                    });
                },
                yes: function (index, layero) {
                    var nowNode = dtree.getNowParam("selectParent"); // 获取当前选中节点
                    $("#ParentName").val(nowNode.context);
                    $("#ParentId").val(nowNode.nodeId);
                    layer.close(index);
                }
            });
        });
        form.on('submit(updatePermission)', function (data) {
            $.post("/admin/permission/update", data.field, function (repo) {
                showAndReload(layer, repo);
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(addPermission)', function (data) {
            $.post("/admin/permission/add", data.field, function (repo) {
                layer.msg(repo.msg, function () {
                    window.location.reload();
                });
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        
    })
</script>